<template>
  <section v-if="!isEdit" class="f-equipment-detail w-card">
    <div class="title-box">
      <span class="title-text">套餐商品详情</span>
      <div>
        <el-button type="primary" plain @click="isEdit = true">编辑</el-button>
      </div>
    </div>

    <div class="f-card">
      <p class="f-title">基础信息</p>
      <ul class="f-ul">
        <li>
          <p>设备商品名称：</p>
          <p>{{goodsInfo.baseGoodsName   || '--'}}</p>
        </li>
        <li>
          <p>商品名称：</p>
          <p>{{goodsInfo.goodsName || '--'}}</p>
        </li>
        <li>
          <p>套餐设备数量：</p>
          <p>{{goodsInfo.baseNum || '--'}}</p>
        </li>
        <li>
          <p>商品状态：</p>
          <p :style="{color:  goodsInfo.shelveStatus == 1? '#67C23A': '#F56C6C'}">
            {{ goodsInfo.shelveStatus == 1? '上架中': '已下架' }}
          </p>
        </li>
        <li>
          <p>设备商品颜色：</p>
          <p>{{goodsInfo.color || '--'}}</p>
        </li>
        <li>
          <p>购买方式：</p>
          <p>{{ buyType[goodsInfo.buyType] || '--'}}</p>
        </li>
        <li>
          <p>购买上限：</p>
          <p>{{goodsInfo.buyNumMax || '--'}}</p>
        </li>
        <li>
          <p>商品排序：</p>
          <p>{{goodsInfo.sortPower || '--'}}</p>
        </li>
        <li>
          <p>运费方式：</p>
          <p>{{goodsInfo.logistType || '--'}}</p>
        </li>

        <template v-if="goodsInfo.buyType == 1">
          <li>
            <p>商品标价：</p>
            <p>{{goodsInfo.showPrice || '--'}}元</p>
          </li>
          <li>
            <p>采购等级：</p>
            <p>{{goodsInfo.vipLevel}}级</p>
          </li>
          <li>
            <p>商品售价：</p>
            <p>{{goodsInfo.actualPrice || '--'}}元</p>
          </li>
          <li>
            <p>采购等级有效期：</p>
            <p>{{goodsInfo.monthExpire}}月</p>
          </li>
        </template>

        <template v-if="goodsInfo.buyType == 2">
          <li>
            <p>积分兑换对象：</p>
            <p>{{goodsInfo.pointsBuyFromtype == 1? '平台': goodsInfo.pointsBuyFromtype == 2? '其他代理商': '--'}}</p>
          </li>
          <li>
            <p>购买积分：</p>
            <p>{{goodsInfo.buyPoints || '--'}}</p>
          </li>
        </template>

        <li>
          <p>创建时间：</p>
          <p>{{ getDateTime(goodsInfo.createTime)[6] || '--' }}</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">商品信息</p>
      <ul class="f-ul">
        <li style="width: 100%;">
          <p>商品主图：</p>
          <el-image style="width: 100px; height: 100px" :src="goodsInfo.headImg" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
            fit="cover" :preview-src-list="[goodsInfo.headImg]" />
        </li>
        <li style="width: 100%;">
          <p>商品详情：</p>
          <p v-html="goodsInfo.goodsDetail"></p>
        </li>
      </ul>
    </div>
  </section>

  <equipmentEdit v-else :isEdit="isEdit" :goodsInfo="goodsInfo" @baseGoodsModify="getBaseGoodsInfo" @cancelEdit="isEdit = false">
  </equipmentEdit>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import api from './api.js'
import equipmentEdit from './add.vue'

export default {
  components: { equipmentEdit },

  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      isEdit: false,

      goodsId: route.query.goodsId,
      goodsInfo: {},

      buyType: {
        '1': '金额购买',
        '2': '积分兑换',
        '3': '都可以',
      }
    })

    onMounted(() => {
      getBaseGoodsInfo()
    })

    const getBaseGoodsInfo = () => {
      let json = {
        uniqueId: state.goodsId
      }
      api.goodsInfo(json).then(res => {
        state.isEdit = false
        state.goodsInfo = res.data
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    return {
      ...toRefs(state),
      getDateTime,
      handleCurrentChange,
      getBaseGoodsInfo
    }
  }
}
  </script>
  
<style lang='scss' scoped>
.f-equipment-detail {
  box-sizing: border-box;
  padding: 20px;

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-right: 10px;
    .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 140px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
  }
}
</style>